<template>
    <div>            
        <article>
            <h3>项目价值贡献</h3>
            <a-row :gutter="24">
                <a-col :md="24" :lg="24" :xl="12" class="both-box">
                    <a-row :gutter="24" class="bottom">
                        <a-col :md="24" :lg="24" :xl="24">
                            <section>
                                <div class="flex-between">
                                    <a-tooltip>
                                        <h3><i class="iconfont icon-a-paiming1"></i>部门绩点情况</h3>
                                        <template slot="title">执行中、验收中、已结题</template>
                                    </a-tooltip>                                    
                                    <div class="btn-line" v-if="projectData.length">
                                        <a-button type="primary" @click="toReportWork('/reportWork/queryDeptPoint')">                                    
                                            更多<a-icon type="more" class="more"/>
                                        </a-button>
                                    </div>
                                </div>                                  
                                <div class="table-box">
                                    <a-table
                                        :columns="projectColumns"
                                        :data-source="projectData"
                                        :loading="projectLoading"
                                        :pagination="false"
                                        rowKey='id'
                                    >
                                        <span slot="rank" slot-scope="text, record, index" :class="{'active-rank': ((projectPagination.current - 1) * projectPagination.pageSize + parseInt(index) + 1) < 4}">
                                            {{ (projectPagination.current - 1) * projectPagination.pageSize + parseInt(index) + 1 }}                                            
                                        </span>
                                    </a-table>     
                                    <a-pagination v-if="projectData.length"
                                        :pageSize="projectPagination.pageSize"
                                        size="small"
                                        v-model="projectPagination.current"
                                        :total="projectPagination.total"
                                        :hideOnSinglePage="true"
                                        @change="(value) => onChangepage(value, 'project')"
                                    >
                                    </a-pagination>                                   
                                </div>    
                            </section>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24" class="bottom">
                        <a-col :md="24" :lg="24" :xl="24">
                            <section>
                                <div class="flex-between">
                                    <h3><i class="iconfont icon-a-paiming1"></i>个人绩点情况</h3>
                                    <div class="btn-line" v-if="proPerData.length">
                                        <a-button type="primary"  @click="toReportWork('/reportWork/queryPersonPoint')">                                    
                                            更多<a-icon type="more" class="more"/>
                                        </a-button>
                                    </div>
                                </div> 
                                <div class="table-box">
                                    <a-table
                                        :columns="proPerColumns"
                                        :data-source="proPerData"
                                        :loading="proPerLoading"                                        
                                        :pagination="false"
                                        rowKey='id'
                                    >
                                        <span slot="rank" slot-scope="text, record, index" :class="{'active-rank': ((proPerPagination.current - 1) * proPerPagination.pageSize + parseInt(index) + 1) < 4}">
                                            {{ (proPerPagination.current - 1) * proPerPagination.pageSize + parseInt(index) + 1 }}                                            
                                        </span>
                                    </a-table>     
                                    <a-pagination v-if="proPerData.length"
                                        size="small"
                                        :pageSize="proPerPagination.pageSize"
                                        v-model="proPerPagination.current"
                                        :total="proPerPagination.total"
                                        :hideOnSinglePage="true"
                                        @change="(value) => onChangepage(value, 'proPer')"
                                    >
                                    </a-pagination>
                                </div>    
                            </section>
                        </a-col>
                    </a-row>
                </a-col>
                <a-col :md="24" :lg="24" :xl="12" class="bottom" v-has="'reportCentent:allBudget'">
                    <a-spin :spinning="spinning">
                    <section class="type-line">
                        <div class="flex-between">
                            <div class="header">
                                <h3>所有项目绩点得分情况</h3>
                                <div class="tab-box">
                                    <template v-for="item of typeList">
                                        <a-tooltip :key="item.value">
                                            <span
                                            :class="[{active: type === item.value}]" 
                                            @click="typeOnChange(item, 'type')">{{item.name}}</span> 
                                            <template slot="title">{{item.tip}}</template>
                                        </a-tooltip>
                                    </template>     
                                </div> 
                            </div>                        
                            <a-button type="primary" @click="handleChangePage('sourceLine')">
                                <i class="iconfont icon-baobiaozhongxin mr5"></i>
                                数据表
                            </a-button>
                        </div>
                        <div class="content-box position">
                            <div class="type-num-tlt type-num-tlt1">得分</div>                            
                            <line-chart-multid                                 
                                :height="482" 
                                :dataSource="dataSource" 
                                :fields="fields"
                                :aliases="aliases"
                                :padding="['70', '0', '60', '50']"/>
                        </div> 
                        <div class="total-line">
                            <div>X绩点总计<p><a-statistic :value="dataSourceInfo.xall"/></p></div>
                            <div>Y绩点总计<p><a-statistic :value="dataSourceInfo.yall"/></p></div>
                            <div>核心力值总计<p><a-statistic :value="dataSourceInfo.coreAll"/></p></div>
                        </div>   
                    </section>
                    </a-spin>
                </a-col>
            </a-row>
        </article>
        <article class="budget-article" v-has="'reportCentent:allBudget'">
            <h3>项目预算情况</h3>
            <a-row :gutter="24">
                <a-col :md="24" :lg="12" :xl="8" class="both-box">
                    <a-row :gutter="24" class="bottom">
                        <a-col :md="24" :lg="24" :xl="24">
                            <a-spin :spinning="spinning3">
                            <section class="maxhbox">
                                <div class="flex-between">
                                    <h3>总项目预算情况统计</h3> 
                                    <div>                               
                                        <a-select placeholder="请选择" class="mr20" v-model="proVal">
                                            <a-select-option v-for="(item,index) of proTypes" dropdownMenuStyle="{background:'red'}"
                                            :key="index" :value="item.value">{{item.name}}</a-select-option>
                                        </a-select>
                                        <a-select placeholder="请选择" v-model="selValue"  @change="getYearBugetAll">
                                            <a-select-option v-for="(item,index) of projectTypes" 
                                            :key="index" :value="item.value">{{item.name}}</a-select-option>
                                        </a-select>
                                    </div>
                                </div>                                  
                                <div class="flex-between">
                                    <template v-if="proVal == '2'">
                                        <div class="total-num"><i class="iconfont icon-zongyusuan"></i>总预算(万元)<p><a-statistic :value="bugetAll.allAmount"/></p></div>
                                        <div class="total-num"><i class="iconfont icon-zongyusuan"></i>已用预算(万元)<p><a-statistic :value="bugetAll.allCost"/></p></div>
                                        <div class="total-num"><i class="iconfont icon-zongyusuan"></i>可用预算(万元)<p><a-statistic :value="bugetAll.allFree"/></p></div>
                                    </template>
                                    <template v-else>
                                        <div class="total-num"><i class="iconfont icon-zongyusuan"></i>项目总预算(万元)<p><a-statistic :value="bugetAll.projectAllAmount"/></p></div>
                                        <div class="total-num"><i class="iconfont icon-zongyusuan"></i>项目已用预算(万元)<p><a-statistic :value="bugetAll.projectAllCost"/></p></div>
                                        <div class="total-num"><i class="iconfont icon-zongyusuan"></i>项目可用预算(万元)<p><a-statistic :value="bugetAll.projectAllFree"/></p></div>
                                    </template>
                                </div> 
                            </section>
                            </a-spin>  
                        </a-col>
                    </a-row>
                    <a-row :gutter="24" class="bottom">
                        <a-col :md="24" :lg="24" :xl="24">
                            <section class="maxhbox2">
                                <div class="flex-between">
                                    <h3><i class="iconfont icon-a-paiming1"></i>各经营体项目预算投入(单位：万元)</h3>
                                    <!-- <div class="btn-line">
                                        <a-button type="primary">                                    
                                            更多<a-icon type="more" class="more"/>
                                        </a-button>
                                    </div> -->
                                </div> 
                                <div class="table-box">
                                    <a-table
                                        :columns="budgetColumns"
                                        :data-source="budgetData"
                                        :loading="budgetLoading"
                                        :pagination="false"
                                        rowKey='factoryName'
                                    >
                                        <span slot="rank" slot-scope="text, record, index" :class="{'active-rank': ((budgetPagination.current - 1) * budgetPagination.pageSize + parseInt(index) + 1) < 4}">
                                            {{ (budgetPagination.current - 1) * budgetPagination.pageSize + parseInt(index) + 1 }}                                            
                                        </span>
                                        <span slot="totalBudget" slot-scope="text" :title="text">
                                            {{text}}
                                        </span>
                                    </a-table>     
                                    <a-pagination v-if="budgetData.length > 0"
                                        size="small"
                                        :pageSize="budgetPagination.pageSize"
                                        v-model="budgetPagination.current"
                                        :hideOnSinglePage="true"
                                        :total="budgetPagination.total"
                                        @change="(value) => onChangepage(value, 'budget')"
                                    >
                                    </a-pagination>
                                </div>    
                            </section>
                        </a-col>
                    </a-row>
                </a-col>
                <a-col :md="24" :lg="12" :xl="16" class="bottom">
                    <a-spin :spinning="spinning2">
                    <section class="type-line">
                        <div class="flex-between budget-box">
                            <div class="flex-center">
                                <h3>项目预算情况</h3>  
                                <a-select placeholder="请选择" v-model="selMonthValue"  @change="getYearmonthBudget">
                                    <a-select-option v-for="(item,index) of projectFirstTypes" 
                                    :key="index" :value="item.code">{{item.name}}</a-select-option>
                                </a-select>
                                <div class="tab-box">
                                    <template v-for="item of typeListBudget">
                                        <a-tooltip :key="item.value">
                                            <span
                                            :class="[{active: typeBudget === item.value}]" 
                                            @click="typeOnChange(item, 'typeBudget')">{{item.name}}</span> 
                                            <!-- <template slot="title">{{item.tip}}</template> -->
                                        </a-tooltip>
                                    </template>     
                                </div>
                            </div>                      
                            <a-button type="primary" @click="handleChangePage('sourceBar')">
                                <i class="iconfont icon-baobiaozhongxin mr5"></i>
                                数据表
                            </a-button>
                        </div>
                        <div class="content-box position">
                            <div class="type-num-tlt type-num-tlt2">金额(万元)</div>
                            <template v-if="typeBudget == '0'">
                                <StackBar :dataSource="dataSourceBar"/>
                            </template>
                            <template v-else-if="typeBudget == '1'">
                                <line-chart-multid                                 
                                :height="455" 
                                :dataSource="dataSourceBar" 
                                :fields="bugfields"
                                :aliases="bugaliases"
                                :padding="['90', '10', '45', '45']"/>
                            </template>
                            <template v-else>
                                <line-chart-multid                                 
                                :height="455" 
                                :dataSource="dataSourceBar" 
                                :fields="bugfields2"
                                :aliases="bugaliases2"
                                :padding="['90', '10', '45', '45']"/>
                            </template>
                        </div>
                    </section>
                    </a-spin>
                </a-col>
            </a-row>
        </article>
        <ProjectDetTable
            :rowKey="visibleObj.rowKey"
            :tableTitle="visibleObj.title" 
            :visible="visible"
            :width="visibleObj.width"
            :pagination="false"
            :proData="visibleObj.proData" 
            :proColumns="visibleObj.proColumns"
            @closeVisible="closeVisible"/>
    </div>
</template>
<script>
import {getAction, postAction} from '@/api/manage'
import LineChartMultid from '@/views/reportCenter/home/component/LineChartMultid'
import StackBar from '@/views/reportCenter/home/component/StackBar'
import { codeInfoList } from '@/api/codeInfo'
import ProjectDetTable from '@/views/reportCenter/home/component/ProjectDetTable'

export default {
    components: {
        LineChartMultid,
        StackBar,
        ProjectDetTable,
    },
    props: {
      proyear: {
        type: String,
        default: ''
      },
      prolist:{
        type: Array,
        default: () => []
      }
    },
    data () {
        return {
            // 
            projectColumns:[
                {
                    title: '序号',
                    dataIndex: 'rank',
                    key: 'rank',
                    width: 60,
                    align: 'center',
                    scopedSlots: { customRender: 'rank' },
                },
                {title: '部门名称',dataIndex: 'deptName',width: '37%',align:'left',ellipsis: true},
                {title: 'X绩点',dataIndex: 'x',width:'20%',align:'left',ellipsis: true},
                {title: 'Y绩点',dataIndex: 'y',width:'20%',align:'left',ellipsis: true},
                {title: '核心力值',dataIndex: 'core',width:'20%',align:'left',ellipsis: true},
            ],
            projectData:[],
            projectPagination:{
                pageSize: 4,
                total:0,
                current:1
            },
            projectLoading: false,
            //
            proPerColumns:[
                {
                    title: '序号',
                    dataIndex: 'rank',
                    key: 'rank',
                    width: 60,
                    align: 'center',
                    scopedSlots: { customRender: 'rank' },
                },
                {title: '姓名',dataIndex: 'realname',width: '16%',align:'left',ellipsis: true},
                {title: 'X绩点',dataIndex: 'x',width:'16%',align:'left',ellipsis: true},
                {title: 'Y绩点',dataIndex: 'y',width:'16%',align:'left',ellipsis: true},
                {title: '核心力值',dataIndex: 'core',width:'16%',align:'left',ellipsis: true},
                {title: '主导项目数',dataIndex: 'leadProjectNum',width:'16%',align:'left',ellipsis: true},
                {title: '参与项目数',dataIndex: 'joinProjectNum',width:'16%',align:'left',ellipsis: true},
            ],
            proPerData:[],
            proPerPagination:{
                pageSize: 4,
                total:0,
                current:1
            },
            proPerLoading: false,
            //
            budgetColumns:[
                {
                    title: '序号',
                    dataIndex: 'rank',
                    key: 'rank',
                    width: 60,
                    align: 'center',
                    scopedSlots: { customRender: 'rank' },
                },
                {title: '费用支出公司',dataIndex: 'factoryName',width: '25%',align:'left',ellipsis: true},
                {title: '总预算',dataIndex: 'amount',width:'24%',align:'left',ellipsis: true, scopedSlots: { customRender: 'totalBudget' }},
                {title: '已用预算',dataIndex: 'cost',width:'24%',align:'left',ellipsis: true, scopedSlots: { customRender: 'totalBudget' }},
                {title: '可用预算',dataIndex: 'free',width:'24%',align:'left',ellipsis: true, scopedSlots: { customRender: 'totalBudget' }},
            ],
            budgetData:[],
            budgetPagination:{
                pageSize: 5,
                total:0,
                current:1
            },
            budgetLoading: false,
            //
            typeList: [
                {name: '已立项', value: '', tip: '显示项目立项完成预计获得的项目绩点情况'},
                {name: '已验收', value: '6', tip:'显示项目验收完成实际获得的项目绩点情况'},
            ],
            type: '',
            //
            typeListBudget: [
                {name: '已用/可用', value: '0', tip: ''},
                {name: '投入/使用', value: '1', tip:''},
                {name: '投用趋势', value: '2', tip:''},
            ],
            typeBudget: '0',
            bugfields: ['amount','cost',],
            bugaliases: [{field:'amount',alias:'投入预算'},{field:'cost',alias:'使用预算'},],
            bugfields2: ['amountAll', 'costAll'],
            bugaliases2: [{field:'amountAll',alias:'累计投入预算'},{field:'costAll',alias:'累计使用预算'},],
            //
            dataSourceInfo: {xTotal: 0, yTotal: 0, coreTotal: 0},
            dataSource: [],
            fields: ['jeecg', 'jeebt', 'data'],
            aliases: [{field:'jeecg',alias:'X绩点得分'}, {field:'jeebt',alias:'Y绩点得分'}, {field:'data',alias:'核心力值得分'}],
            //
            proTypes:[
                {name:'实时统计', value: '2'},
                {name:'项目维度', value: '1'}                
            ],
            proVal: '1',
            projectTypes:[],
            selMonthValue: '',
            selValue: '',
            bugetAll:{allAmount:0, allCost:0, allFree:0},
            dataSourceBar: [],
            projectFirstTypes: [],
            //
            visible: false,
            visibleObj: {},
            spinning:false,
            spinning2:false,
            spinning3:false,
        }
    },
    created(){
        this.projectTypes = Object.assign(this.prolist)     
        this.selValue = this.proyear;
    },
    mounted () {        
        this.getInitData('project') // 部门绩点
        this.getInitData('proPer')  // 个人绩点        
        this.getInitData('budget')  // 公司预算统计        
        this.getProjectPointSurvey() // 项目绩点得分情况
        this.getYearBugetAll()
        this.getCodeInfoList()
    },
    methods: {
        getInitData(type){
            this[type + 'Loading']=true;
            const url = type === 'project' ? 'deptPointTop10' : (type == 'proPer' ? 'personPointTop10' : 'factoryBudget')
            getAction('/reportHome/' + url).then(res=>{
                this[type + 'Loading']=false;
                if(res.code==200){
                    res.result.forEach((item, index) => {
                        item.id = index
                    })
                    this[type + 'Pagination'][type+ 'DataCopy'] = res.result;
                    this[type + 'Pagination'].total = this[type + 'Pagination'][type+ 'DataCopy'].length;
                    this[type + 'Data'] = this[type + 'Pagination'][type+ 'DataCopy'].slice(0, this[type + 'Pagination'].pageSize)                    
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
            })
        },
        onChangepage(current, type) {
            const start = (current - 1) * this[type + 'Pagination'].pageSize
            const end = current * this[type + 'Pagination'].pageSize
            this[type + 'Data'] = this[type + 'Pagination'][type + 'DataCopy'].slice(start, end)            
        },
        /**
         * 项目绩点得分情况 
         */
        getProjectPointSurvey(){
            this.spinning = true
            getAction('/reportHome/getProjectPointSurvey', {status: this.type}).then(res=>{
                if(res.code==200 && res.result){
                    this.dataSourceInfo = res.result
                    this.dataSource = res.result.projectPointList
                    this.dataSource.forEach(item=>{
                        item.jeecg = item.x
                        item.jeebt = item.y
                        item.data = item.core
                        item.countMonth = item.yearmonth                                            
                    })
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
                this.spinning = false
            })
        },
        typeOnChange(item, type){
            if(item.value == this[type]) return
            this[type] = item.value;
            if(type == 'type'){                
                this.getProjectPointSurvey();
            }
        },
        /**
         * 项目预算情况
         */
        getYearBugetAll(){
            this.spinning3 = true
            getAction('/reportHome/yearBugetAll',{year: this.selValue}).then(res=>{
                if(res.code==200){
                    this.bugetAll = res.result
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
                this.spinning3 = false
            })
        },
        getCodeInfoList(){
            codeInfoList({column:"parentid",order:"Asc",pageNo:0,pageSize:-1,isdel:false,type:'项目大类'}).then( res=>{
                if(res.code==200 && res.result){                    
                    this.projectFirstTypes = res.result.records
                    this.projectFirstTypes.splice(0, 0, { code: '', name: '所有项目', type: '项目大类', isdel: '0', parentid: '' })
                    this.getYearmonthBudget()
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
            })
        },
        getYearmonthBudget(){
            this.spinning2 = true
            getAction('/reportHome/yearmonthBudget', {bigType: this.selMonthValue}).then(res=>{
                if(res.code==200){
                    res.result.forEach(item =>{                        
                        this.resetData(item, ['amountAll','costAll','amount','cost','free'])
                        item['已用预算'] = item.cost
                        item['可用预算'] = item.free
                        item.countMonth = item.yearMonth                        
                    })
                    this.dataSourceBar = res.result
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
                this.spinning2 = false
            })
        },
        resetData(item, list){
            list.forEach(o=>{
                if(!item[o]){
                    item[o] = 0
                }
                item[o] = Number(item[o])
            })
        },
        toReportWork(url){
            let routeUrl = this.$router.resolve({
                path: url,
            });
            window.open(routeUrl.href, '_blank');
        },
        /**
         * 查看数据表 
         */
        handleChangePage(type){
            if(type === 'sourceLine'){
                this.visibleObj.proColumns = [
                    {title: '统计年月',dataIndex: 'countMonth',width: '25%',align:'center',ellipsis: true},
                    {title: 'X绩点得分',dataIndex: 'x',width:'25%',align:'center',ellipsis: true},
                    {title: 'y绩点得分',dataIndex: 'y',width:'25%',align:'center',ellipsis: true},                
                    {title: '核心力值得分',dataIndex: 'core',width:'25%',align:'center',ellipsis: true},                
                ]
                this.visibleObj.title = (this.type ? '已验收' : '已立项' )+'数据表'  
                this.visibleObj.rowKey = 'countMonth'
                this.visibleObj.proData = this.dataSource
                this.visibleObj.title = '项目绩点得分情况'
            }else{
                this.visibleObj.proColumns = [
                    {title: '统计年月',dataIndex: 'yearMonth',width: '15%',align:'center',ellipsis: true},
                    {title: '已用(使用)预算',dataIndex: 'cost',width:'18%',align:'center',ellipsis: true},             
                    {title: '可用预算',dataIndex: 'free',width:'15%',align:'center',ellipsis: true},
                    {title: '投入预算',dataIndex: 'amount',width:'15%',align:'center',ellipsis: true},                    
                    {title: '累计投入预算',dataIndex: 'amountAll',width:'15%',align:'center',ellipsis: true},
                    {title: '累计使用预算',dataIndex: 'costAll',width:'15%',align:'center',ellipsis: true},
                ]
                this.visibleObj.width = '70vw'
                this.visibleObj.title = '项目预算情况(万元)'                             
                this.visibleObj.rowKey = 'yearMonth'
                this.visibleObj.proData = this.dataSourceBar
            }
            this.visible = true        
        },
        closeVisible(){
            this.visible = false
        }
    }
}
</script>
<style lang="less" scoped>
@import 'home.less';
.header{display: flex;
    .tab-box{margin-left: 50px;margin-top:2px;font-size: 13px;}
}
.total-line{display: flex;margin: 8px 0 0 10px;
    >div{background-color: #070431;border-radius: 4px;margin-right: 23px;padding: 9px 14px;min-width: 22%;font-size: 12px;color: #fff;
        p{text-align: right;margin-top: 10px;}        
        /deep/ .ant-statistic-content{color: #60d9ff;font-size: 19px;font-weight: bold;}
        &:nth-of-type(2) /deep/ .ant-statistic-content{color: #ff9a4d;}
        &:nth-of-type(3) /deep/ .ant-statistic-content{color: #45ee88;}
    }    
    
}
.total-num{font-size: 13px;color: #83a0e9;position: relative;margin-top: 15px;flex:1;padding-left:5%;
    p{font-size: 26px;color: #fff; padding-top: 5px;padding-left: 20px;}
    .iconfont{padding-right: 5px;color: #ffe641;}
    &:after{content: '';width: 1px;height: 80%;right: 0;top: 10%;background-color: #5664bc;position: absolute;}
    &:nth-of-type(2) .iconfont{color: #1190ff;}
    &:last-of-type{padding-right:0;
        .iconfont{color: #73d46c;}
        &:after{display: none;}
    }
    /deep/ .ant-statistic-content-value-decimal{font-size: 24px;}
}
.budget-box{position: absolute;top: 10px;width: calc(100% - 40px);z-index: 1;
    h3{display: inline-block;}
    .ant-select{margin-left: 10px;}
    .flex-center{
        .tab-box{margin-left: 30px;}
    }
    /deep/ .ant-select-selection{min-width: 100px;}
}
.mr20{margin-right: 20px}
.maxhbox{height: 140px !important}
.maxhbox2{min-height: 320px !important}
.both-box{display: flex;flex-wrap: wrap;}
.budget-article .both-box>.bottom{width: 108%;}
.type-num-tlt1{top: 20px;}
.type-num-tlt2{top: 53px;}
.bottom{margin-bottom: 24px;}
article{padding-bottom: 0 !important;}
@media screen and (min-width:1330px) and (max-width:1500px){
    .budget-article{
        .ant-col-xl-8{width: 45%}
        .ant-col-xl-16{width: 55%}
    }
}
@media (max-width: 1330px) {
    .budget-article{
        .ant-col-xl-8, .ant-col-xl-16{width: 100%}
    } 
}
</style>